import React from 'react';
import { Tooltip, Input, Menu, Button } from 'antd';
import { QuestionCircleOutlined, SearchOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
import { TableDropdown } from '@ant-design/pro-table';
import { addPaper, delPaper } from '@/services/paper';
import { getEnum } from '@/services/subject';
import { addParamsType } from '@/services/paper';
import { getStorage } from '@/utils/utils';
import { query } from '@/services/user';
import { Link } from 'umi';

export const menu = (
  <Menu>
    <Menu.Item key="1">1st item</Menu.Item>
    <Menu.Item key="2">2nd item</Menu.Item>
    <Menu.Item key="3">3rd item</Menu.Item>
  </Menu>
);

type columnsT = (...arg) => ProColumns<request.PaperType>[];
export type configT = {
  columns: columnsT;
};

export const config = async (prop) => {
  const userAll = (await query()).data.map((re) => ({ value: re.user_id, label: re.real_name }));

  const adsAll = (await getEnum()).data.map((re) => ({ value: re.id, label: re.ads_name }));

  const start = {
    userSelect() {
      return userAll.findIndex((el) => el.value === (prop ? prop.user_id : 0)) + 1;
    },
    adsSelect() {
      return (
        adsAll.findIndex((el) => {
          return el.value === (prop ? prop.ads_id : 0);
        }) + 1
      );
    },
  };

  const columnText = {
    id: {
      title: '序号',
      dataIndex: 'id',
    },
    paper_name: {
      title: '试卷名称',
      dataIndex: 'paper_name',
    },
    created_at: {
      title: '创建时间',
      dataIndex: 'created_at',
    },
    user_name: {
      title: '创建者',
      dataIndex: ['user', 'real_name'],
      key: 'user_id',
    },
    ads_id: {
      title: '所属学科',
      dataIndex: ['ad_subject', 'ads_name'],
      key: 'ads_id',
    },
    descript: {
      title: '备注',
      dataIndex: 'descript',
    },
  };

  const columns: columnsT = (param) => {
    return [
      {
        ...columnText.id,
        valueType: 'index',
        width: 68,
      },
      {
        ...columnText.paper_name,
        render: (_, item) => (
          <Link
            to={{
              pathname: 'detail',
              search: `?paper_id=${item.id}`,
            }}
          >
            {_}
          </Link>
        ),
        // 自定义筛选项功能具体实现请参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel
        filterDropdown: () => (
          <div style={{ padding: 8 }}>
            <Input style={{ width: 188, marginBottom: 8, display: 'block' }} />
          </div>
        ),
        filterIcon: (filtered) => (
          <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
        ),
      },
      {
        ...columnText.user_name,
        valueType: 'select',
        request: async () => userAll,
        initialValue: start.userSelect(),
        width: 100,
      },
      {
        ...columnText.ads_id,
        valueType: 'select',
        request: async () => adsAll,
        initialValue: start.adsSelect(),
      },
      {
        title: '状态',
        dataIndex: 'status',
        initialValue: 'all',
        filters: true,
        width: 100,
        onFilter: true,
        valueEnum: {
          all: { text: '全部', status: 'Default' },
          close: { text: '关闭', status: 'Default' },
          running: { text: '维护中', status: 'Processing' },
          online: { text: '已完成', status: 'Success' },
          error: { text: '异常', status: 'Error' },
        },
      },
      {
        title: (
          <>
            {columnText.created_at.title}
            <Tooltip placement="top" title="这是一段描述">
              <QuestionCircleOutlined style={{ marginLeft: 4 }} />
            </Tooltip>
          </>
        ),
        width: 140,
        key: 'created_at',
        dataIndex: columnText.created_at.dataIndex,
        valueType: 'date',
        sorter: (a, b) => a.created_at - b.created_at,
      },
      {
        ...columnText.descript,
        ellipsis: true,
        width: 180,
        copyable: true,
      },
      {
        title: '操作',
        width: 180,
        key: 'option',
        valueType: 'option',
        fixed: 'right',
        render: (_, item) => [
          <Button danger key={item.id} onClick={() => {
            delPaper({ id: item.id + ',' })
            param()
          }}>删除</Button>,
        ],
      },
    ];
  }

  return {
    columns,
  };
};

export const addPopConfig: addPopConfig<addParamsType> = {
  title: '添加新试卷',
  subText: '添加试卷',
  form: {
    paper_name: {
      type: 'text',
      label: '试卷名',
      placeholder: '请输入试卷名',
      rules: [
        {
          required: true,
          message: '请输入试卷名！',
        },
      ],
    },
    ads_id: {
      type: 'select',
      label: '所属学科',
      request: async ({ keyWords }) => {
        const res = await getEnum({
          ads_name: keyWords,
        });
        return res.data.map((re) => ({ value: re.id, label: re.ads_name }));
      },
      rules: [
        {
          required: true,
          message: '请选择所属学科！',
        },
      ],
    },
    descript: {
      type: 'text',
      label: '备注',
      placeholder: '试卷备注',
    },
    paper_img: {
      type: 'upload',
      label: '试卷图片',
      rules: [
        {
          required: true,
          message: '请选择试卷图片'
        }
      ]
    },
  },
  validateMessage: {
    required: '必填项',
  },

  submitBind: (res) =>
    addPaper({ ...res, user_id: getStorage('roles') && getStorage('roles')['user_id'] }),
};
